<template>
    <div class="result">
        <headerCont :page="'login'"></headerCont>
        <div class="result_list">
            <div class="result_list_tit">
                <span @click="labelTab(1)" :class="activeInd==1?'active':''">已报成果</span>
                <span @click="labelTab(2)" :class="activeInd==2?'active':''" style="margin-left:20px;">往年成果</span>
                <div class="year" v-show="isDate">
                    <b>年度：</b>
                    <a-date-picker
                        :open='yearShowOne' 
                        @openChange="openChangeOne" 
                        @panelChange="panelChangeOne"  
                        mode="year" 
                        format="YYYY" 
                        type="date" 
                        v-model="shijian" 
                        suffix-icon=" " 
                        @change="onchangetime" 
                        placeholder="年份"
                    />
                </div>
            </div>
            <div class="tableList">
                <table style="text-align:center;" width="1210"  align="center" cellpadding="">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>时间</th>
                            <th>成果名称</th>
                            <th>成果编号</th>
                            <th>成果类别</th>
                            <th>申报状态</th>
                            <th>推荐状态</th>
                            <th>形审状态</th>
                            <th>初审状态</th>
                            <th>获奖证书</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in yblist" :key="index">
                            <td>{{index+1}}</td>
                            <td>{{item.shijian}}</td>
                            <td>{{item.cxj_mc_zw}}</td>
                            <td>{{item.cxj_xmbh}}</td>
                            <td>{{item.fl_mc}}</td>
                            <!-- <td class="green_td">
                                <span>{{item.sbzt}}</span>
                            </td> -->
                            <td :class="item.sbztbh=='101' || item.sbztbh=='102'?'green_td':'orange_td'">
                                <span>{{item.sbzt}}</span>
                            </td>
                            <td :class="item.tjztbh=='101'?'green_td':'pink_td'">
                                <span>{{item.tjzt?item.tjzt:'未推荐'}}</span>
                                <em v-if="item.tjztbh!='200' && item.tjztbh!='' && item.tjztbh!=null" class="chakan pointer" @click="chakan_tjyj(item.id)">查看意见</em>
                                <!-- <em v-if="item.tjztbh=='200' || item.tjztbh=='' || item.tjztbh==null" class="chakan pointer" @click="chakan_tjyj(item.id)">查看推荐意见</em> -->
                            </td>
                            <td :class="item.xsztbh=='304'?'green_td':'orange_td'">
                                <span>{{item.xszt?item.xszt:'未形审'}}</span>
                                <em v-if="item.xsztbh=='302'||item.xsztbh=='303'||item.xsztbh=='304'" class="chakan pointer"  @click="toXsztbh(item)">查看意见</em>
                            </td>
                            <td :class="item.xmztbh=='101' || item.xmztbh=='102' ?'green_td':'pink_td'">
                                <!-- <span>{{item.xmzt}}</span> -->
                                <span v-if="item.xmztbh!='100'">{{item.cszt}}</span>
                            </td>
                            <!-- 所获奖项 -->
                            <td style="cursor:pointer;" @click="awardList(item)">{{item.cxj_shjx}}<br/><span v-if="item.cxj_shjx" style="color:#1890FF;font-size: 14px;">下载</span></td>
                            <td style="display: flex;justify-content: center;align-items: center;" class="pointer">
                                <img style="width:18px;height:18px;margin-left:11px;" @click="toedit(item.fl_id, item.id, item)" src="@/assets/img/bianji.png" alt="">
                                <template v-if="activeInd==1">
                                    <img style="width:18px;height:18px;margin-left:11px;" @click="todel(item.id)" src="@/assets/img/shanchu1.png"  v-if="item.sbztbh!='102'" alt="">
                                    <span style="width:18px;height:18px;margin-left:11px;" v-else></span>
                                </template>
                                <template v-else>
                                    <span style="width:18px;height:18px;margin-left:11px;"></span>
                                </template>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <j-modal
            class="xshistory"
            title="形审记录"
            :visible="visible"
            :width="1400"
            :maskClosable="false"
            :switchFullscreen="switchFullscreen"
            @cancel="handleCancel"
            :footer="null">
            <div class="historylist">
                <div class="">
                    <p class="xslist_right_title1">{{new Date().getFullYear()}}年度电力创新奖形式审查表</p>
                    <p class="xslist_right_xmbh">成果编号：{{cxj_xmbh}}</p>
                    <div class="tableForm">
                        <table style="text-align:center;" width="100%" border="" cellspacing="0" align="center" cellpadding="">
                            <tr>
                                <td width="180">申报单位：</td>
                                <td colspan="3" class="td_text">{{sbdw_qymc}}</td>
                            </tr>
                            <tr>
                                <td width="180">推荐单位：</td>
                                <td colspan="3" class="td_text">{{jttjdw_mc}}</td>
                            </tr>
                            <tr>
                                <td width="180">项目名称：</td>
                                <td colspan="3" class="td_text">{{cxj_mc_zw}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div>
                    <p class="xslist_right_title2">申报材料信息</p>
                    <div class="tableList xstableList">
                        <div>
                            <div class="table_head">
                                <p class="flex0">序号</p>
                                <p class="flex2">材料审查项</p>
                                <p class="flex01">是否合格</p>
                                <p class="flex02">说明</p>
                            </div>
                            <div class="table_cont">
                                <div class="table_contli" v-for="(item, index) in queryxslist" :key="index">
                                    <div class="flex_box">
                                        <div class="xsindex flex0">{{index+1}}</div>
                                        <div class="xswtinfo flex2">
                                            <div class="xswtLbmc">{{item.xswtLbmc}}</div>
                                            <div class="xswtlist">
                                                <div class="xswtdetail" v-for="(item1, index1) in item.List" :key="index1">
                                                    <div class="xswtMc">{{item1.xswtMc}}</div>
                                                    <div class="xsselect">{{item1.xsscSffh=='Y'?'合格':item1.xsscSffh=='N'?'不合格':''}}</div>
                                                    <div class="xsarea">{{item1.xsscBz}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </j-modal>
        <!-- <a-modal
            title="2020年度电力创新奖形式审查表"
            :visible="visible"
            :width="700"
            :footer="null"
            :maskClosable="false"
            @cancel="handleCancel"
        >
            <div class="dialogCont">
                <div class="tableForm">
                    <table width="660" border="" cellspacing="0" cellpadding="">
                        <tr>
                            <td width="150" align="center">申报单位：</td>
                            <td width="509" align="left"><a-input /></td>
                        </tr>
                        <tr>
                            <td width="150" align="center">推荐单位：</td>
                            <td width="509" align="left"><a-input /></td>
                        </tr>
                        <tr>
                            <td width="150" align="center">项目名称：</td>
                            <td width="509" align="left"><a-input /></td>
                        </tr>
                    </table>
                </div>
                <p class="table_title">申报材料信息</p>
                <div class="table_info">
                    <table style="text-align:center;" width="660"  align="center" border="" cellspacing="0" cellpadding="">
                        <thead>
                            <tr>
                                <th width="37">序号</th>
                                <th width="81"></th>
                                <th width="289">材料审查项</th>
                                <th width="80">是否合格</th>
                                <th width="172">补充说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td width="37" rowspan="3">1</td>
                                <td width="81" rowspan="3">完成人情况</td>
                                <td width="289">前3完成人，其投入该项技术研究工作量应占本人同期工作量的30%以上情况</td>
                                <td width="74" class="pointer">
                                    <a-select :disabled="true" default-value="0" style="width: 120px">
                                        <a-select-option value="0">合格</a-select-option>
                                        <a-select-option value="1">不合格</a-select-option>
                                    </a-select>
                                </td>
                                <td width="178">说明</td>
                            </tr>
                            <tr>
                                <td width="289">完成人“创造性贡献”一栏写明本人工作量，并描述对本项目成果创新性贡献</td>
                                <td width="74" class="pointer">
                                    <a-select :disabled="true" default-value="1" style="width: 120px">
                                        <a-select-option value="0">合格</a-select-option>
                                        <a-select-option value="1">不合格</a-select-option>
                                    </a-select>
                                </td>
                                <td width="178">说明</td>
                            </tr>
                            <tr>
                                <td width="289">完成人参加项目的起止时间未超出项目研究的起止时间（不合格例子：项目研究起止时间为2013年5月-2015年8月，完成人参与项目时间为2014年5月-2016年12月）</td>
                                <td width="74" class="pointer">
                                    <a-select :disabled="true" default-value="1" style="width: 120px">
                                        <a-select-option value="0">合格</a-select-option>
                                        <a-select-option value="1">不合格</a-select-option>
                                    </a-select>
                                </td>
                                <td width="178">说明</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </a-modal> -->
        <a-modal
			title="推荐意见"
            class="enclosure_modal"
			:visible="ckyj_visible"
            :maskClosable="false"
            :width="500"
            @cancel="handleCancel_edit"
		>
            <template slot="footer">
                <a-button @click="handleCancel_edit">关闭</a-button>
                <a-button type="primary" @click="handleCancel_edit">确定</a-button>
            </template>
			<div v-html="tjyjYj"></div>
		</a-modal>
		<footer-cont></footer-cont>
    </div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header';
import footerCont from '@/views/declarationSystem/common/footer';
import {
    cxjsb_yblist,
    cxjsbDeleteCxj,
    cxjsb_cktjyj,
    queryXsjlFirst,
    queryByFlId,
    cxjsb_lsyblist
} from '@/api/shenbao'
import moment from 'moment'
export default {
    name: 'Result',
    data() {
        return {
            isDate: false,
            yearShowOne:false,
            shijian: "",
            current: 1,
            yblist: [],
            visible: false,
            ckyj_visible: false,
            tjyjYj: '',
            switchFullscreen: true,
            queryxslist: [],
            queryxsmxlist: [],
            cxj_xmbh: '',
            sbdw_qymc:'',
            jttjdw_mc:'',
            cxj_mc_zw: '',
            activeInd: 1
        }
    },
    components: {
        headerCont,
        footerCont
    },
    methods: {
        openChangeOne(status){
            //status是打开或关闭的状态
            if(status){
                this.yearShowOne =  true
            }
        },
        // 得到年份选择器的值
        panelChangeOne(value){
            this.shijian = moment(value).format('YYYY');
            this.yearShowOne = false;
            this.getCxjsb_lsyblist();
        },
        onchangetime(date, dateString) {
            // this.form_add.add_nf = dateString;
        },
        labelTab(index){
            console.log('*****',index)
            this.activeInd = index;
            if (this.activeInd == 1) {
                this.shijian = "";
                this.getcxjsb_yblist();
                this.isDate = false;
            } else {
                this.getCxjsb_lsyblist();
                this.isDate = true;
            }
        },
        getcxjsb_yblist() {
            cxjsb_yblist().then(res=>{
                if (res.data.code=='200') {
                    this.yblist = res.data.result;
                }
            })
        },
        getCxjsb_lsyblist(){
            let params = {
                shijian: this.shijian
            }
            if (!this.shijian) {
                delete params.shijian;
            }
            cxjsb_lsyblist(params).then(res=>{
                if (res.data.code=='200') {
                    this.yblist = res.data.result;
                }
            })
        },
        toXsztbh(val){
            this.visible = true;
            this.cxj_xmbh = val.cxj_xmbh;
            this.sbdw_qymc = val.sbdw_qymc;
            this.jttjdw_mc = val.jttjdw_mc;
            this.cxj_mc_zw = val.cxj_mc_zw;
            this.getqueryByFlId(val.fl_id, val.id);
        },
        getqueryByFlId(fl_id, id) {
            const self = this;
            queryByFlId({id:fl_id}).then(res=>{
                if (res.data.code=='200') {
                    self.getqueryXsjlFirst(id)
                    self.queryxslist = res.data.result;
                }
            })
        },
        getqueryXsjlFirst(id) {
            queryXsjlFirst(id).then(res=>{
                this.queryxsmxlist = res.data.result;
                for (var i=0;i<this.queryxslist.length;i++) {
                    for (var j=0;j<this.queryxsmxlist.length;j++) {
                        if (this.queryxslist[i].xswtBh == this.queryxsmxlist[j].xswtBh) {
                            this.queryxslist[i].xsscSffh = this.queryxsmxlist[j].xsscSffh;
                            this.queryxslist[i].xsscBz = this.queryxsmxlist[j].xsscBz;
                        }
                    }
                }
                this.queryxslist = this.sortarr(this.queryxslist);
            })
        },
        sortarr(arr) {
            let dataArr = [];
            arr.map(mapItem => {
                if (dataArr.length == 0) {
                    dataArr.push({ xswtLb: mapItem.xswtLb,xswtLbmc: mapItem.xswtLbmc, List: [mapItem] })
                } else {
                    let res = dataArr.some(item=> {
                        if (item.xswtLb == mapItem.xswtLb) {
                            item.List.push(mapItem)
                            return true
                        }
                    })
                    if (!res) {
                        dataArr.push({ xswtLb: mapItem.xswtLb,xswtLbmc: mapItem.xswtLbmc, List: [mapItem] })
                    }
                }
            })
            return dataArr
        },
        chakan_tjyj(id) {
            const self = this;
            cxjsb_cktjyj({cxj_cxj_id:id}).then(res=>{
                if (res.data.code == '200') {
                    self.ckyj_visible = true;
                    self.tjyjYj = res.data.result.tjyjYj;
                } else {
                    self.$message.error(res.data.message)
                }
            })
        },
        // 所获奖项
        awardList(item){
            console.log(item)
            this.$router.push({
                path: '/shenbao/awardList',
                query: {
                    id: item.id
                }
            })
        },
        handleCancel_edit() {
            this.ckyj_visible = false;
        },
        toedit(type, id, item) {
            this.$router.push({
                path: '/shenbao/declare',
                query: {
                    tjzt: item.tjzt, /* 20220709——推荐状态（如果是“已推荐”，则禁止修改“成果名称”） */
                    // tjzt: "已推荐", /* 20220709——推荐状态（如果是“已推荐”，则禁止修改“成果名称”） */
                    type: type,
                    cxj_cxj_id: id,
                    isHead: 1,
                    cxj_xmbh: item.cxj_xmbh,
                    cxj_mc_zw: item.cxj_mc_zw
                }
            })
        },
        todel(id) {
            const self = this;
            this.$confirm({
                content: '确定要删除该项吗？',
                onOk() {
                    let formData = {
                        cxj_cxj_id: id
                    }
                    cxjsbDeleteCxj(formData).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            self.$message.success('删除成功')
                            self.getcxjsb_yblist();
                        } else {
                            self.$message.error(data.message)
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    self.destroyAll();
                },
            });
        },
        destroyAll() {
            this.$destroyAll();
        },
        handleCancel() {
            this.visible = false;
        },
        resetForm() {
            this.$nextTick(()=>{
            })
        },
    },
    mounted() {
        this.getcxjsb_yblist();
    }
}
</script>

<style lang='less'>
.anticon-delete {
    color: #CB0C0C;
    font-size: 18px;
    font-weight: bolder;
}
.anticon-edit {
    color: #006DC0;
    margin-right: 22px;
    font-size: 18px;
    font-weight: bolder;
}
.pagination {
    position: absolute;
    bottom: 40px;
    left: 44px;
    .ant-pagination-item-active {
        background: #3388EE;
        a {
            color: #FFFFFF;
            font-size: 16px;
        }
    }
    ul {
        li {
            width: 46px!important;
            height: 46px!important;
            text-align: center!important;
            line-height: 46px!important;
            border-radius: 2px;
            border: 1px solid rgba(164, 168, 180, 0.2)!important;
            margin-right: 19px!important;
        }
    }
}
.xshistory {
    &.fullscreen  {
        .ant-modal {
            width: 100%!important;
            top: 0!important;
            height: 100%!important;
            .ant-modal-content {
                max-height: 100%!important;
                height: 100%!important;
                .ant-modal-body {
                    margin-top: 0;
                }
            }
        }
    }
}
</style>
<style lang="less" scoped>
.result_list {
    width: 1210px;
	margin: 0 auto;
    min-height: 460px;
    position: relative;
}
.result_list_tit {
    width: 100%;
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    align-items: center;
    height: 70px;
    &>span {
        display: inline-block;
        // margin-top: 28px;
        // padding-bottom: 14px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 70px;
        height: 100%;
        cursor: pointer;
        &.active {
            border-bottom: 3px solid #3388EE;
        }
    }
    .year {
        margin-left: 20px;
        // margin-top: 25px;
        height: 40px;
        display: flex;
        align-items: center;
        b {
            font-weight: normal;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 25px;
            width: 65px;
            flex-shrink: 0;
        }
        .ant-input {
            border: 1px solid #d9d9d9;
            height: 40px;
        }
    }
}
.result_table {
    margin-top: 30px;
}
.ant-table-thead > tr > th {
    background: red!important;;
}
.tableList {
    margin-top: 30px;
    table {
        margin-top: 20px;
        background: #FFFFFF;
        thead {
            background: #F5F5F5;
            tr {
                th {
                    height: 54px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                }
            }
        }
        tbody {
            tr {
                height: 52px;
                border-bottom: 1px solid #E8E8E8;
                td {
                    color: #444444;
                    font-size: 14px;
                    font-weight: 400;
                    height: 52px;
                }
                .green_td {
                    span {
                        padding: 2px 4px;
                        background: #E1F3D9;
                        border-radius: 2px;
                        color:#48862C;
                        font-size: 14px;
                    }
                }
                .orange_td {
                    span {
                        padding: 2px 4px;
                        background: #F7D194;
                        border-radius: 2px;
                        color:#865C2C;
                        font-size: 14px;
                    }
                }
                .pink_td{
                    span {
                        padding: 2px 4px;
                        background: #FEE2E1;
                        border-radius: 2px;
                        color:#864F2C;
                        font-size: 14px;
                    }
                }
                &:nth-child(even){
                    background: #F5F5F5;
                }
                .chakan {
                    color:#1890FF;
                    font-style: normal;
                    font-size: 12px;
                    margin-left: 4px;
                }
            }
        }
    }
}
.tableForm {
    table {
        border: 1px solid #ECEBEB;
        tr {
            height: 40px;
            td {
                color: #333333;
                font-size: 14px;
                font-weight: 400;
                height: 40px;
                &.td_text {
                    text-align: left;
                    padding: 0 20px;
                }
            }
            input {
                width: 100%;
                height: 100%;
                border: 0;
                outline: 0;
            }
        }
    }
}
.table_title {
    margin-top:22px;
    margin-bottom: 20px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #111111;
    line-height: 22px;
}
.table_info {
    table {
        border: 1px solid #ECEBEB;
        thead {
            background: #F5F5F5;
            tr {
                th {
                    height: 44px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                }
            }
        }
        tbody {
            tr {
                padding: 8px;
                td {
                    color: #444444;
                    font-size: 14px;
                    font-weight: 400;
                    padding: 8px;
                }
            }
        }
    }
}
.xslist_right_title1 {
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 29px;
    width: 100%;
    text-align: center;
}
.xslist_right_xmbh {
    width:100%;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 29px;
    width: 100%;
    text-align: right;
    padding-right: 100px;
}
.xslist_right_title2 {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #111111;
    line-height: 25px;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.xstableList {
    .table_head {
        background: #F5F5F5;
        height: 54px;
        width:100%;
        display: flex;
        align-items: center;
        p {
            height: 54px;
            line-height: 54px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin:0;
            text-align: center;
        }
    }
    .table_cont {
        border-left: 1px solid #ECEBEB;
        border-right: 1px solid #ECEBEB;
        .table_contli {
            border-bottom: 1px solid #ECEBEB;
        }
        p {
            margin-bottom:0;
        }
        .xswtinfo {
            display: flex;
            align-items: center;
            border-left: 1px solid #ECEBEB;
            border-right: 1px solid #ECEBEB;
        }
        .xswtLbmc {
            width: 120px;
            text-align:center;
        }
        .xswtlist {
            flex:1;
            border-left: 1px solid #ECEBEB;
            .xswtdetail {
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ECEBEB;
                &:last-child {
                    border-bottom: none;
                }
            }
            .xswtMc {
                flex:1;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 0 10px;
                border-right: 1px solid #ECEBEB;
                min-height:60px;
            }
            .xsselect {
                width: 140px;
                min-height:60px;
                text-align:center;
                border-right: 1px solid #ECEBEB;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .xsarea {
                width:260px;
                display: flex;
                justify-content: center;
                align-items: center;
                textarea {
                    width: 90%;
                    min-height: 50px;
                    outline: none;
                    border: 1px solid #ECEBEB;
                    border-radius: 4px;
                }
            }
        }
    }
    .flex_box {
        display: flex;
        align-items: center;
    }
    .flex0 {
        width: 70px;
        text-align:center;
    }
    .flex1 {
        flex:1;
    }
    .flex01 {
        width: 140px;
    }
    .flex02 {
        width: 260px;
    }
    .flex2 {
        flex:2;
    }
}
</style>